<template>
	<div class="UserRefund">
		<div class="UserRefund-itembox">

			<div class="UserRefund-item">
				<div class="ui-left">退房原因</div>
				<div class="ui-right" @click="show1 = true">
					<input type="text" v-model="Reasonschecking" readonly placeholder="请选择退房原因" />
					<span class="more"></span>
				</div>
			</div>
			<div class="UserRefund-item">
				<div class="ui-left">可退金额</div>
				<div class="ui-right">
					<input type="text" readonly v-model="userRefunddata.refundPrices" />
					<!--userRefunddata.refundPrices-->
					<span>元</span>
				</div>
			</div>
			<div class="UserRefund-item">
				<div class="ui-left">可退押金</div>
				<div class="ui-right">
					<input type="text" readonly v-model="userRefunddata.cashPledge" />
					<!--userRefunddata.cashPledge-->
					<span>元</span>
				</div>
			</div>

		</div>

		<div class="u-Becareful">
			<p>注：{{userRefunddata.days}}前取消订单，全额退款</p>
			<p>{{userRefunddata.days}}日后取消订单，扣除后{{userRefunddata.extra_days}}天的租金作为违约金</p>
		</div>

		<div class="UserRefundOK">
			<div class="UserRefundOK-btn" @click="UserRefundOK">
				提交退房
			</div>
		</div>

		<yd-actionsheet :items="myItems1" v-model="show1" cancel="取消"></yd-actionsheet>

	</div>
</template>

<script>
	import { mapGetters, mapActions } from 'vuex'
	import api from '../fetch/api'
	export default {
		name: 'UserRefund',
		data() {
			return {
				orderId: this.$route.query.orderId,
				Reasonschecking: '',
				mrefundPrices: '',
				mcashPledge: '',
				//				mrefundPrices:this.userRefunddata.refundPrices,
				//				mcashPledge:this.userRefunddata.cashPledge,
				show1: false,
				myItems1: [{
						label: '房屋与实际不符',
						callback: () => {
							this.Reasonschecking = '房屋与实际不符';
							//                          this.$dialog.toast({mes: '房屋与实际不符'});
							/* 注意： callback: function() {} 和 callback() {}  这样是无法正常使用当前this的 */
						}
					},
					{
						label: '我不喜欢这个房东',
						callback: () => {
							this.Reasonschecking = '我不喜欢这个房东';
						}
					},
					{
						label: '入住完成-提前退房',
						callback: () => {
							this.Reasonschecking = '入住完成-提前退房';
						}
					},
					{
						label: '其他',
						callback: () => {
							this.Reasonschecking = '其他';
						}
					}
				],
				getHiss: JSON.parse(sessionStorage.getItem("userinfo")),
			}
		},
		mounted() {
			this.userRefundinfo();
		},
		computed: {
			...mapGetters([
				'source',
				'userinfo',
				'userRefunddata'
			])
		},
		methods: {
			...mapActions({
				setRedundInfo: 'setRedundInfo'
			}),
			userRefundinfo() {
				let that = this;
				let ajaxSign = {
					source: that.source, //string 是 请求源 ios
					token: that.getHiss.token, //string 是 登录验证 1256 g54ggf56d2454gd
					orderId: that.orderId.toString() //string 是 订单id
				}
				let ajaxData = api.getAES(ajaxSign);
				api.GetUserRefund(ajaxData)
					.then(res => {
						that.setRedundInfo(res.result)
					})
			},
			UserRefundOK() {
				if (this.Reasonschecking=="") {
					
					this.$dialog.toast({
						mes: '请选择退房原因',
						timeout: 1000
					});
					return
				}
				let ajaxSign = {
					source:this.source,// string 是
					token:this.getHiss.token,// string 是
					orderId:this.orderId.toString(),// string 是 订单id 123
					content:this.Reasonschecking,// string 是
					refundDesc:'',// string 否
				}
				let ajaxData = api.getAES(ajaxSign);
				api.GetRefundAction(ajaxData)
				.then(res=>{
					this.$dialog.toast({
						mes: res.msg,
						timeout: 1000
					});
				})
			}
		}
	}
</script>

<style>
	body {
		background: #fff;
	}
	
	.UserRefund {
		width: 100%;
		background: #fff;
		color: #282828;
		font-size: .31rem;
		line-height: .31rem;
	}
	
	::-webkit-input-placeholder {
		font-size: .31rem;
		color: #a4a4a4;
	}
	
	.UserRefund-item {
		display: flex;
		justify-content: space-between;
		padding: .49rem .24rem;
		border-bottom: 1px solid #EEECEC;
		box-sizing: border-box;
	}
	
	.ui-right {
		display: flex;
		align-items: center;
	}
	
	.UserRefund input {
		border: none;
		height: .33rem;
		text-align: right;
		padding-right: .1rem;
		box-sizing: border-box;
		color: #A4A4A4;
	}
	
	.more {
		display: block;
		width: .23rem;
		height: .23rem;
		border: 1px solid #bcbcbc;
		box-sizing: border-box;
		transform: rotate(45deg);
		border-left: none;
		border-bottom: none;
	}
	
	.u-Becareful {
		font-size: .29rem;
		color: #e25051;
		line-height: .56rem;
		padding: .24rem;
		box-sizing: border-box;
	}
	
	.UserRefundOK {
		width: 100%;
		position: fixed;
		padding-bottom: .42rem;
		box-sizing: border-box;
		bottom: 0;
	}
	
	.UserRefundOK-btn {
		width: 3.85rem;
		height: .83rem;
		background: #E25051;
		font-size: .35rem;
		line-height: .83rem;
		text-align: center;
		color: #fff;
		margin: auto;
	}
</style>